<template>
  <div class="ConsumingRanking">
    <div class="topbox">
      <el-form ref="form" :model="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="yonghulist"
                    @updateModelValue="updateModelValue"
                    :valuekey="{ name: 'name', value: 'orgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="用能单元">
                  <FilterSelect2
                  :valuekey="{ name:'name',value:'id'}" 
                  :optionlist="options"
                  v-model="form.tagId"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="能源类型">
                  <FilterSelect2
                  :valuekey="{ name:'text',value:'value'}" 
                  :optionlist="typelist"
                  v-model="form.energyType"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: 4px;display: flex;">
                <el-radio-group v-model="form.dateType" size="small" style="margin-right: 20px;">
                  <el-radio-button  label="1">日</el-radio-button>
                  <el-radio-button  label="2">月</el-radio-button>
                  <el-radio-button  label="3">年</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="form.dateType=='1'" v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" style="flex: 1;"></el-date-picker>
                <el-date-picker v-else-if="form.dateType=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" style="flex: 1;"></el-date-picker>
                <el-date-picker v-else v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small" style="flex: 1;"> </el-date-picker>
              </el-col>
              <el-col :span="3" style="text-align: right;margin-top: 4px;">
                  <el-button  size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="getechart">查 询</el-button>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="echartbox" ref="rankingechart"></div>
      <div class="tablebox">
        <div>
          <TopTitle @command="command" @daochu="daochu" @shuaxin="getechart" ></TopTitle>
        </div>
        <div class="table">
          <TableColumn 
          :tableConfig="tableConfig" 
          :issize="iissize"
          :tableData="tableData" 
          ref="tablecolumn"
          ></TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getequiptreeapi,getusagelineapi,getusagelistapi} from '@/api/energy-consumption/energy-consuming/ConsumingConfiguration'
import {getEnergyTypeApi} from '@/api/energy-consumption/Basic-information/Price-scheme'
import {GetEcharts} from '@/utils/echarts'
import {exportexcel} from '@/utils/excel'
import TableColumn from '@/components/Table'
import TopTitle from '@/components/TopTitle/newtitle'
import dayjs from 'dayjs'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle,
    TableColumn
  },
  data() {
    return {
      form: {
        energyType:'',
        dateType: '1',
        orgNo: '',
        tagId:''
      },
      value1:'',
      value2:'',
      value3:'',
      typelist:[],
      iissize: 'medium',
      options:[],
      yonghulist:[],
      tableData: [],
      tableConfig: [
        { label: '序号', type:'index',width: '100',center:'center' },
        { label: '日期', prop: 'dateTime' ,center:'center'},
        { label: '设备', prop: 'deviceName' },
        { label: '总损耗(kWh)', prop: 'usageValue' ,center:'right'},
        { label: '排名', prop: 'rank' ,center:'right'},
      ]
    };
  },

  async mounted() {
    const { data: { list } } = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    const orgno= this.yonghulist.find(ele=>ele.id == companyId)?.orgNo
    this.$set(this.form, 'orgNo',orgno?orgno: list[0]?.orgNo)
    await this.updateModelValue(this.form.orgNo)
    this.$set(this.form, 'tagId', this.options[0]?.id)
    const { data: { list:array } } = await getEnergyTypeApi()
    this.typelist = array
    this.$set(this.form,'energyType',this.typelist[0]?.value)
    this.gettime()
    this.getechart()
  },

  methods: {
    // 获取用能单元
    async updateModelValue(val) {
      const id=this.yonghulist.find(ele=>ele.orgNo==val).id
      localStorage.setItem('companyId', id)
      const { data: { list } } = await getequiptreeapi()
      this.options = list.find(ele => ele.id == val).tagList
      this.$set(this.form,'tagId',this.options[0].id?this.options[0].id:'')
    },
    // 导出
    daochu() {
      const dateString=this.form.dateType=='1'?this.value1:this.form.dateType=='2'?this.value2:this.value3
      exportexcel('/ecm-microservice-biz/ecm/tags/equip/rank/export', {dateString,...this.form},'用能排名')
    },
    //  获取当前时间戳
    gettime() {
      this.$set(this,'value1',dayjs().format('YYYY-MM-DD'))
      this.$set(this,'value2',dayjs().format('YYYY-MM'))
      this.$set(this,'value3',dayjs().format('YYYY'))
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
    // 重置
    async chongzhi() {
      this.form = { energyType: '', dateType: '1', orgNo: '', tagId: '' }
      const companyId = localStorage.getItem('companyId')
      const orgno= this.yonghulist.find(ele=>ele.id == companyId)?.orgNo
      this.$set(this.form, 'orgNo',orgno?orgno: list[0]?.orgNo)
      await this.updateModelValue(this.form.orgNo)
      this.$set(this.form, 'tagId', this.options[0]?.id)
      this.$set(this.form,'energyType',this.typelist[0]?.value)
      this.gettime()
      this.getechart()
    },
    // 获取排名图表
    async getechart() {
      if(!this.form.orgNo) return this.$message.warning('请先选择企业')
      if(!this.form.tagId) return this.$message.warning('请先选择用能单元')
      const dateString=this.form.dateType=='1'?this.value1:this.form.dateType=='2'?this.value2:this.value3
      const { data: { list } } = await getusagelineapi({ ...this.form, dateString })
      const { data: { list:array } } = await getusagelistapi({ dateString, ...this.form })
      this.tableData=array
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'3%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: list.map(ele=>ele.timeReading)
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: list.map(ele=>ele.valueReading)
          }
        ]
      };
      GetEcharts(this,this.$refs.rankingechart,option)
    }
  },
};
</script>
<style scoped>
.ConsumingRanking{
  height:100%;
  padding: 10px;
  .topbox{
    background-color: #fff;
    height: 80px;
    padding: 20px;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 20px;
    background-color: #fff;
    .echartbox{
      height: 45%;
    }
    .tablebox{
      height: 55%;
      .table{
        height: 90%;
      }
    }
  }
}
</style>